<!--代码逻辑和样式库-->
<script src="./select-car.component.js"></script>
<style src="./select-car.scss" lang="scss" scoped></style>

<template>
  <div>
    <!--  Select car弹窗  -->
    <el-dialog title="选择车辆关联设备" :visible.sync="showDialogFlag" width="1200px" @close="closeDialog()">
      <el-form label-position="right" :inline="true">
        <el-form-item>
          <el-input v-model="searchCriteria.queryStr" placeholder="请输入车牌号码检索车辆" clearable @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchCriteria.transportId" placeholder="请选择运输公司" clearable class="aq-margin-left-4">
            <el-option
              v-for="item in companies"
              :key="item.id"
              :label="item.text"
              :value="'' + item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">
            查询
          </el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="reset()">
            重置
          </el-button>
          <el-button type="success" icon="el-icon-edit" @click="submit()">
            确认关联
          </el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-table
            ref="carTable"
            :data="data"
            highlight-current-row
            border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
            <!-- el-table-column align="center" width="55" fixed>
              <template slot-scope="scope">
                <span>{{ (scope.$index + 1)+ (pageNum -1 )*recordNum }}</span>
              </template>
            </el-table-column -->
            <el-table-column prop="licensePlate" label="车牌号" />
            <el-table-column prop="brandName" label="车辆品牌" />
            <el-table-column prop="modelNo" label="车辆型号" />
            <el-table-column prop="vehicleName" label="车辆名称" />
            <el-table-column prop="compName" label="运输单位" />
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="transportStatus" label="运输状态" />
          </el-table>
          <!-- 分页插件 -->
          <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
